module.exports = {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontSize: {
        xs: ["0.25rem", { lineHeight: "0.35rem" }],
        sm: ["0.35rem", { lineHeight: "0.45rem" }],
        base: ["0.42rem", { lineHeight: "0.525rem" }],
        lg: ["0.525rem", { lineHeight: "0.625rem" }],
        xl: ["0.625rem", { lineHeight: "0.725rem" }],
      },
      boxShadow: {
        "l-white": "-10px 0 10px white",
        "l-zinc": "-10px 0 10px #18181",
      },
      height: {
        header: "72px",
        main: "calc(100vh - 72px)",
      },
      backgroundColor: {
        main: "rgb(244,76,88)",
      },
      colors: {
        main: "#f44c58",
        "hover-main": "#f32836",
        'success-100': '#F2F9EC',
        'success-200': '#E4F2DB',
        'success-300': '#7EC050',
        'warn-100': '#FCF6ED',
        'warn-200': '#F8ECDA',
        'warn-300': '#DCA550',
        'error-200': '#f3471c',
        'error-100': '#ED7456',
        'error-300': '#ffffff'
      },
      variants: {
        scrollbar: ['dark']
      },
      backdropBlur: {
        '4xl': '240px'
      }
    },
  },
  plugins: [
    require('tailwind-scrollbar')
  ],
  darkMode: "class",
};
